@extends('layout.default.template')
@section('content')
<div class="page-header">
  <div class="container-fluid">
    <h1>Dashboard</h1>
    <ul class="breadcrumb">
      <li><a href="#">Dashboard</a></li>
    </ul>
  </div>
</div>
<div class="container-fluid">
	{{-- Totals Item or Order Per Status --}}
	<div id="db-total-per-status-box" style="margin: 0; padding: 10px;">
		<h3 style="color: #fff">Totals</h3>
		@foreach ( $total_per_status as $status )
			<div class="order_panel col-lg-3 col-md-3 col-sm-6" style="margin: 5px 0;">
					<div class="panel-heading" style="background-color: {{ $status['background'] }}">
						<a href="{{ $status['main_url'] }}">
							<h4 style="font-weight: bold; color: #fff;">{{ $status['title'] }}</h4>
						</a>
						<span style="color: #fff; font-size: 16px; font-weight: bold">{{ $status['total'] }}</span>
					</div>
					<div class="panel-body text-center" style="background-color: {{ $status['background'] }}; opacity: 0.6;">
						<a href="{{ $status['view_more'] }}" class="link">
							<span style="color: #fff; font-size: 14px;">View More<i class=" fa fa-arrow-circle-right fa-xs" style="margin-left: 4px;"></i></span>
						</a>
					</div>
				</a>
			</div>
		@endforeach
	</div>
	
	{{-- Preview List --}}
	<div class="clearfix"></div>
	<div  id="db-preview-list">
		
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('#db-total-per-status-box .order_panel a').on('click', function(e) {
		if ( !$(this).hasClass('link') ) return;

		e.preventDefault();
		if ( $(this).attr('href') == '#' ) return;

		$.ajax({
			url: $(this).attr('href'),
			dataType: 'html',
			beforeSend: function() {},
			complete: function() {},
			success: function( html ) {
				$('#db-preview-list').hide().html(html).fadeIn();
			}
		});	
	});
});
</script>
@stop